<script setup>
import { reactive, ref, watchEffect } from 'vue';
import * as api from '@/api/public';
import * as role from '@/api/sys/role'
import { ElMessage } from 'element-plus';
import store from "@/store/index.js";

// form表单类============
let form = reactive({
    id: '',
    username: '',
    password: '',
    realName: '',
    phone: '',
    sex: '',
    idCard: '',
    deptId: '',
    remark: '',
    roleIds: []
})

const formSetter = (v) => {
    form.id = v?.id
    form.username = v?.username;
    form.password = v?.password;
    form.realName = v?.realName;
    form.phone = v?.phone;
    form.sex = v?.sex;
    form.idCard = v?.idCard;
    form.deptId = v?.deptId;
    form.remark = v?.remark
    form.roleIds = v?.roleIds
};
// ==============

// 部门列表数据
let deptList = reactive([]);

// 角色列表数据
const roles = reactive([])

const init = () => {
    api.getData({
        page : 1,
        size : 10
    },'/dept').then(res => {
        deptList.push(...res.data)
    })
    role.getAll().then(res => {
        console.log('==========',res)
        roles.push(...res.data)
    })
}
init()

const props = defineProps({
    data: Object
})

const visible = defineModel();

watchEffect(() => {
    formSetter(props.data)
})

const emit = defineEmits(['transfer','success'])

// 提交方法
const submit = () =>{
    console.log(roles)
    console.log(form)
    if(!form.id){
        console.log(form)
        api.add(form,'/user').then(res =>{
            ElMessage({
                message: res.msg,
                type: 'success'
            });
            emit('success')
            visible.value = false
        })
    }else{
        console.log(form)
        api.update(form,'/user').then(res =>{
            ElMessage({
                message: res.msg,
                type: 'success'
            });
            emit('success')
            visible.value = false
        })
    }
}
</script>
<template>
    <div>
        <el-dialog v-model="visible" :title="form.id ? '修改' : '添加'" width="500">
            <el-form :model="form">
                <el-form-item label="用户名">
                    <el-input v-model="form.username"/>
                </el-form-item>
                <el-form-item label="真名">
                    <el-input v-model="form.realName"/>
                </el-form-item>
                <el-form-item label="密码">
                    <el-select
                        v-model="form.roleIds"
                        multiple
                        collapse-tags
                        collapse-tags-tooltip
                        :max-collapse-tags="3"
                        placeholder="请选择角色"
                    >
                        <el-option
                            v-for="item in roles"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="电话号码">
                    <el-input v-model="form.phone"/>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select
                    v-model="form.sex"
                    placeholder="请选择"
                    >
                        <el-option value="男" label="男"/>
                        <el-option value="女" label="女"/>
                        <el-option value="其他" label="其他"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="form.idCard"/>
                </el-form-item>
                <el-form-item label="部门选择">
                    <el-select
                    v-model="form.deptId"
                    placeholder="请选择"
                    size="small"
                    >
                        <el-option
                        v-for="item in deptList"
                        :key="item.deptId"
                        :label="item.name"
                        :value="item.deptId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visible = false" style="padding: 0 16px;">取消</el-button>
                    <el-button type="primary" @click="submit" style="padding: 0 16px;" :loading="store.state.loaded">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
